<template>
	<view class="cart">
		<u-navbar
            title="购物车"
			:placeholder="true"
        >
			<template #left></template>
        </u-navbar>

		<view class="content">
			<view class="cart-list">
				<u-checkbox-group v-model="checked" activeColor="#f56c6c" iconSize="18" @change="selectedChange">
					<view class="cart-list-item" v-for="(item,index) in cartList" :key="index">
						<view class="cart-list-item__radio">
							<u-checkbox shape="circle" :name="index"></u-checkbox>
						</view>
						<view class="cart-list-item__info">
							<view class="cart-list-item__info__image">
								<image :src="minioUrl + item.image"></image>
							</view>
							<view class="cart-list-item__info__msg">
								<view class="cart-list-item__info__msg__name">
									<u--text :text="item.name" :lines="2" size="13"></u--text>
								</view>
								<view class="cart-list-item__info__msg__specs">{{ item.specs }}</view>
								<view class="cart-list-item__info__msg__price">￥{{ item.price }}</view>
								
								<view class="cart-list-item__info__count">
									<u-number-box v-model="item.count"></u-number-box>
								</view>
							</view>
						</view>
						<view class="cart-list-item__delete">
							<u-icon name="close" size="20" @click="deleteClick(index)"></u-icon>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</view>

		<view class="cart-settle" id="cartSettle" v-if="cartList.length !== 0">
			<view class="cart-settle-selectAll">
				<u-switch v-model="selectAll" activeColor="#f56c6c" @change="selectAllChange"></u-switch><text>全选</text>
			</view>
			<view class="cart-settle-price">
				<view class="cart-settle-price__total">￥{{ total }}</view>
				<view class="cart-settle-price__discount">获得积分<text>{{ integral }}</text>个</view>
			</view>
			<view class="cart-settle-button">
				<u-button text="去结算" color="#f56c6c" shape="circle" @click="handleSettle"></u-button>
			</view>
		</view>
		
		<view class="cart-empty" v-else>
			<image src="../../static/cart_empty.png"></image>
			<u-button text="随便逛逛" shape="circle" customStyle="width: 400rpx" @click="toHome"
				color="linear-gradient(to right, rgb(255,166,178), rgb(255,94,120))"
			></u-button>
		</view>
		
		<u-popup :show="deleteShow" mode="center" round="10" :safeAreaInsetBottom="false" closeOnClickOverlay
			@close="cancelDelete"
		>
			<view class="cart-delete-pop__wrap">
				<view class="cart-delete__tips">确认将这个宝贝删除?</view>
				<view class="cart-delete__todo">
					<view class="cart-delete__todo__think" @click="cancelDelete">我再想想</view>
					<view class="cart-delete__todo__delete" @click="handleDelete">删除</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToastRef"></u-toast>

		<u-tabbar
			value="cart"
			:safeAreaInsetBottom="false"
			activeColor="#f56c6c"
		>
			<u-tabbar-item text="首页" name="index" icon="home" @click="tabbarClick"></u-tabbar-item>
			<u-tabbar-item text="分类" name="sort" icon="grid" @click="tabbarClick"></u-tabbar-item>
			<u-tabbar-item text="购物车" name="cart" icon="shopping-cart-fill" ></u-tabbar-item>
			<u-tabbar-item text="我的" name="mine" icon="account" @click="tabbarClick" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script lang="ts" setup>
	import { ref,onMounted,getCurrentInstance,computed } from 'vue'
	import type { ICartItem } from "@/types/cart"

	const { proxy }: any = getCurrentInstance()
	const checked = ref<number[]>([])
	const selectAll = ref(false)
	const cartList = ref<ICartItem[]>([])
	const minioUrl = proxy.$minioUrl
	const integral = ref(0)
	const selectAllChecked= ref<number[]>([])
	const deleteShow = ref(false)
	const deleteIndex = ref(0)
	const uToastRef = ref()

	const selectedChange = (n: string[]) => {
		if(n.length === cartList.value.length){
			selectAll.value = true
		}else{
			selectAll.value = false
		}
	}
	
	const selectAllChange = (e: boolean) => {
		if(e){
			checked.value = selectAllChecked.value
		}else{
			checked.value = []
		}
	}
	
	const deleteClick = (index: number) => {
		deleteShow.value = true
		deleteIndex.value = index
	}
	
	const cancelDelete = () => {
		deleteShow.value = false
	}
	
	const handleDelete = () => {
		const goods = cartList.value[deleteIndex.value]
		let storageInfo = uni.getStorageSync("info")
		let data = {
			userId: storageInfo.id,
			goodsId: goods.id,
			specs: goods.specs
		}
		proxy.ajax(proxy.api.deleteCartItem, "POST", data, function(resp: any){
			cartList.value = resp.data.cart
			setSelectChecked(cartList)
			uToastRef.value.show({
				type: 'success',
				message: "删除成功",
			})
			deleteShow.value = false
		})
	}
	
	const handleSettle = () => {
		if(checked.value.length === 0){
			return
		}
		let createOrder = []
		for(let i=0;i<checked.value.length;i++){
			let item = cartList.value[checked.value[i]]
			createOrder[i] = item
		}
		uni.setStorageSync("createOrder", createOrder)
		uni.navigateTo({
			url: "/order/create_order/create_order"
		})
	}
	
	let total = computed<number>(()=>{
		let sum = 0
		for(let i=0;i<checked.value.length;i++){
			let item = cartList.value[checked.value[i]]
			sum += item.count*item.price
		}
		integral.value = Math.floor(sum / 10)
		return sum.toFixed(1)
	})

	const tabbarClick = (e: string) => {
		uni.redirectTo({
			url: '/pages/'+e+"/"+e
		});
	}
	
	onMounted(()=>{
		let storageInfo = uni.getStorageSync("info") 
		if(storageInfo === ""){
			uni.redirectTo({
				url: '/user/login/login'
			});
			return
		}
		proxy.ajax(proxy.api.getCart, "POST", { userId: storageInfo.id }, function(resp: any){
			cartList.value = resp.data.cart
			setSelectChecked(cartList)
		})
	})
	
	const toHome = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		});
	}
		
	const setSelectChecked = (cartList: any) => {
		selectAllChecked.value = []
		checked.value = []
		selectAll.value = false
		for(let i=0; i<cartList.value.length; i++){
			selectAllChecked.value[i] = i
		}
	}
</script>

<style lang="scss">
@import "style.scss"
</style>
